import React, {PureComponent} from 'react';
import {Carousel, WingBlank} from 'antd-mobile';
import './index.less';


export default class Index extends PureComponent {
  state = {
    imgHeight: 176,
  };

  render() {
    const {data, autoplay, infinite} = this.props;
    return (
      <WingBlank>
        <Carousel
          autoplay={autoplay}
          infinite={infinite}
        >
          {data.map(item => (
            <a
              key={item.id}
              href={item.href}
              style={{display: 'inline-block', width: '100%', height: this.state.imgHeight}}
            >
              <img
                src={item.thumb}
                alt={item.name}
                style={{width: '100%', verticalAlign: 'top'}}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({imgHeight: 'auto'});
                }}
              />
            </a>
          ))}
        </Carousel>
      </WingBlank>
    );
  }
}